import 'package:flutter/material.dart';

class KnockShareHomePage extends StatefulWidget {
  const KnockShareHomePage({super.key});

  @override
  State<KnockShareHomePage> createState() => _KnockShareHomePageState();
}

class _KnockShareHomePageState extends State<KnockShareHomePage>
    with SingleTickerProviderStateMixin {
  //当前选中的按钮索引，-1表示未选中
  int _selectedIndex = -1;
  //按钮文字
  final List<String> _buttonTexts = ["纯图片布局", "沉浸式大卡布局", "白卡上下布局"];
  //页面路由
  final List<String> _pageRoutes = ["/GalleryLayoutPage", "/ImmersiveCardPage", "/SplitCardPage"];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            alignment: Alignment.centerLeft,
            margin: const EdgeInsets.only(left: 16),
            child: const Text(
              "碰一碰",
              style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 30,
                  color: Colors.black),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children:  _buttonTexts.asMap().entries.map((entry) {
                return _buildCustomButton(entry.key);
              }).toList(),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildCustomButton(int index) {
    final isSelected = _selectedIndex == index;
    return GestureDetector(
      onTap: () => _handleButtonTap(index),
      behavior: HitTestBehavior.translucent,
      child: Container(
        margin: const EdgeInsets.only(left: 16, right: 16,bottom: 12),
        height: 40,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: isSelected ? Colors.blue : Colors.grey[200],
            borderRadius: BorderRadius.circular(20)),
        child: Text(
          _buttonTexts[index],
          style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w600,
              color: isSelected ? Colors.white : Colors.blue),
        ),
      ),
    );
  }

  void _handleButtonTap(int index) {
    setState(() {
      if (_selectedIndex == index) {
        _selectedIndex = -1;
      } else {
        _selectedIndex = index;
      }
    });
    Navigator.pushNamed(
        context, _pageRoutes[index]);
  }
}
